<!DOCTYPE html>
<html>
<head>
	<title>onyx togglebutton sample</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
	<script src="../../../onyx/package.js" type="text/javascript"></script>
	<style>
		.tools > * {
			margin: 3px;
		}
	</style>
</head>
<body>
	<script>
		new (enyo.kind({
			name: "App",
			classes: "enyo-unselectable tools",
			components: [
				{kind: "onyx.ToggleButton", value: true},
				{tag: "br"},
				{kind: "onyx.ToggleButton", onContent: "Yes", offContent: "No"},
				{tag: "br"},
				{kind: "onyx.ToggleButton", value: true, onContent: "", offContent: ""},
				{tag: "br"},
				{kind: "onyx.ToggleButton", value: true, style: "background-color: #35A8EE; color: #F1F1F1;"},
				{tag: "br"},
				{kind: "onyx.ToggleButton", value: true, style: "background-color: #C51616; color: #F1F1F1;"},
				{tag: "br"},
				{kind: "onyx.ToggleButton", value: true, disabled: true},
				{tag: "br"},
				{kind: "onyx.ToggleButton", disabled: true}
			]
		}))().write();
	</script>
</body>
</html>
